<template>
	<div>
	  <el-skeleton style="width: 240px" v-if="!bannerList">
	    <template slot="template">
	      <el-skeleton-item variant="image" style="width: 240px; height: 240px;" />
	      <div style="padding: 14px;">
	        <el-skeleton-item variant="p" style="width: 50%" />
	        <div
	          style="display: flex; align-items: center; justify-items: space-between;"
	        >
	          <el-skeleton-item variant="text" style="margin-right: 16px;" />
	          <el-skeleton-item variant="text" style="width: 30%;" />
	        </div>
	      </div>
	    </template>
	  </el-skeleton>
  <el-carousel :interval="4000" type="card" height="300px" v-else>
    <el-carousel-item v-for="(item,index) in bannerList" :key="index">
	            <el-image 
	              style="width: 100%; height: 100%"
	              :src="item.bannerUrl"
	              fit="cover"></el-image> 
    </el-carousel-item>
  </el-carousel>
  </div>
</template>

<script>
	export default{
		data(){
			return{
				bannerList:null
			}
		},
		created(){
			this.getBanner();
		},
		methods:{
			getBanner(){
				let _this = this
				_this.$axios.post("/banner").then(res => {  
					_this.bannerList = res.data.data 
				})
			}
		}
	}
</script>

<style scoped>
	<style>
	  .el-carousel__item h3 {
	    color: #475669;
	    font-size: 14px;
	    opacity: 0.75;
	    line-height: 200px;
	    margin: 0;
	  }
	  
	  .el-carousel__item:nth-child(2n) {
	    background-color: #99a9bf;
	  }
	  
	  .el-carousel__item:nth-child(2n+1) {
	    background-color: #d3dce6;
	  }
	  
 
	</style>
</style>
